<template>
  <view class="container" @touchmove.stop.prevent="() => {}">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#000000" size="24" :bold="true"></u-icon>
    </view>
    <image class="bg-c" src="../../static/img/bg-c.png"></image>
    <view class="sign-up-title-c">
      <image
        class="bg1-l"
        src="../../static/img/left.png"
        mode="aspectFill"
      ></image>
      <image
        class="bg2-2"
        src="../../static/img/right.png"
        mode="aspectFill"
      ></image>
      <view class="sign-up-title-item"> 请输入你的邮箱 </view>
      <!-- <view class="sign-up-title-tips">
				给你推荐年龄适配的Ta
			</view> -->
    </view>
    <view class="text">
      <u-input v-model="val" border="none" inputAlign="center"></u-input>
    </view>
    <view class="to-btn" @click="stepToNext"> 下一步（6/7） </view>
  </view>
</template>

<script>
import { addMemberInfo } from "@/api/enroll";
export default {
  components: {},
  data() {
    return {
      img: this.$BASE_URL,
      bgColor: "rgba(0, 31, 63, 0)",
      val: "",
      indicatorStyle: `height: 41px;color: rgba(51, 51, 51, 0.2);`,
      fsdfds: `opacity: 0.5;background: rgba(238, 245, 254, 0);`,
      code: "",
      obj: {},
    };
  },
  methods: {
    left() {
      uni.navigateBack();
    },
    async stepToNext() {
      const personal = uni.getStorageSync("userInfo");
      let obj = {
        id: personal.id,
        nid: personal.nid,
        email: this.val,
        nickName: personal.nickName,
      };
      const { code } = await addMemberInfo(obj);
      if (code !== 200) return;
      uni.redirectTo({
        url: "/pages/enroll/eight",
      });
    },
  },
};
</script>
<style>
.u-input {
  padding: 12rpx 35rpx !important;
}
</style>
<style lang="scss">
.bg-c {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}

.u-nav-slot {
  margin-bottom: 115rpx;
  padding-left: 20rpx;
  z-index: 100;
}

.text {
  width: 686rpx;
  height: 75rpx;
  background: rgba(159, 181, 235, 0.07);
  opacity: 1;
  border: 2rpx solid #d1deff;
  margin: 0 auto;
  border-radius: 30rpx;
}

.container {
  position: relative;
  width: 100vw;
  height: 100%;
  padding-top: 66rpx;
}

.sign-up-title-c {
  position: relative;
  width: 500rpx;
  height: 200rpx;
  margin: auto;
  margin-top: 52rpx;
  box-sizing: content-box;
  overflow: hidden;
  color: #333;

  .bg1-l {
    position: absolute;
    top: 0rpx;
    left: 20rpx;

    width: 95rpx;
    height: 85rpx;
  }

  .bg2-2 {
    position: absolute;
    top: 66rpx;
    right: 0;
    width: 83rpx;
    height: 60rpx;
  }

  .sign-up-title-item {
    font-size: 48rpx;
    top: 66rpx;
    font-weight: 800;
    font-family: "SourceHanSerifCN-Heavy";
    margin-top: 66rpx;
    text-align: center;
    color: rgba(45, 49, 50, 0.9);
  }

  .sign-up-title-tips {
    text-align: center;
    font-family: "PingFang SC-Regular, PingFang SC";
    margin-top: 24rpx;
    color: #666;
    font-size: 24rpx;
    font-weight: 400;
  }
}

.select-c {
  position: relative;
  padding: 20rpx 40rpx;
  border-radius: 30rpx;

  .picker-view {
    height: 450rpx;
    margin: auto;

    color: #434343;
  }

  picker-view-column {
    .item {
      width: 100%;
      text-align: center;
      line-height: 41px;
      height: 41px;
      color: #b8b8b8;
      font-weight: 400;
      font-family: "PingFang SC-Regular, PingFang SC";
    }

    .lldl {
      font-family: "PingFang SC-Bold, PingFang SC";
      color: rgba(67, 67, 67, 0.9);
      font-weight: 400;
    }
  }
}

.indicator-class {
  background: #eef5fe;
  z-index: -1;
}

.to-btn {
  width: 536rpx;
  height: 84rpx;
  background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  text-align: center;
  line-height: 84rpx;
  margin: auto;
  color: rgba(65, 92, 158, 0.9);
  font-weight: 400;
  position: fixed;
  bottom: 15vh;
  left: 112rpx;
  font-size: 28rpx;
  font-family: "PingFang SC-Bold, PingFang SC";
}

.tips {
  margin: auto;
  text-align: center;
  margin-top: 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b7b7b7;
}
</style>
